<template>
<PublicPage pageName="新增常用规格" :borderType="true" :showNav="true">
  <view class="layout_box">
    <scroll-view class="layout_con_box" scroll-y="true" -webkit-overflow-scrolling="touch" scroll-with-animation="true">
      <div class="specs_msg_box" @click.stop="addSpecsFn">{{addSpecData.specName || '规格值'}}<img class="edit_icon_box" src="https://image.qqpyyds.com/mpAppImg/icon/edit1_icon.png" alt=""></div>
      <ul class="specs_list_ul">
        <li class="specs_list_li" v-for="(items, itemsIndex) in addSpecData.goodsSpecValuesVOList" :key="itemsIndex"  @click.stop="editSpecificSpecFn(items, itemsIndex)">
          <text class="u-p-r-20">{{items.specValue}}</text>
          <img class="close_icon_box" @click.stop="removeSpecificSpecFn(itemsIndex)" src="https://image.qqpyyds.com/mpAppImg/icon/error1_icon.png" alt="">
        </li>
        <li class="specs_list_li specs_list_li_two" hover-class='hover' v-if="!(addSpecData.goodsSpecValuesVOList.length>=spuQuantity)" @click.stop="addSpecificSpecFn">添加具体规格</li>
      </ul>
    </scroll-view>
    <div class="keep_btn_box">
      <button class="btn_box" hover-class='hover' @click.stop="specSubmitFn">保存</button>
    </div>
    <!-- 添加规格弹窗 -->
    <div class="fixed_box" v-if="classifyTypeShow">
      <div class="publicPopup_box">
        <div class="public_msg_box">
          <div class="public_titName_box">{{operationType==1?'编辑':'添加'}}规格类型</div>
          <div class="public_input_box"><input class="input_box" type="text" maxlength="10" v-model.trim="specName" @input="(e) => inputFn(e, 'specName')" placeholder="请输入规格类型名称(限10个字)"></div>
        </div>
        <div class="btn_list_box">
          <button class="btn_box btn_box_l" hover-class='hover' @click.stop="classifyTypeShow=false">取消</button>
          <button class="btn_box btn_box_r" hover-class='hover' @click.stop="submitSpecsFn">保存</button>
        </div>
      </div>
    </div>
    <!-- 添加规格弹窗 -->
    <!-- 添加具体规格弹窗 -->
    <div class="fixed_box" v-if="specificSpecShow">
      <div class="publicPopup_box">
        <div class="public_msg_box">
          <div class="public_titName_box">{{opSpecificType==1?'编辑':'添加'}}具体规格</div>
          <div class="public_input_box"><input class="input_box" type="text" maxlength="20" v-model="specificSpecName" @input="(e) => inputFn(e, 'specificSpecName')" placeholder="请输入具体规格名称(限20个字)"></div>
        </div>
        <div class="btn_list_box">
          <button class="btn_box btn_box_l" hover-class='hover' @click.stop="specificSpecShow=false">取消</button>
          <button class="btn_box btn_box_r" hover-class='hover' @click.stop="submitSpecificSpecFn">保存</button>
        </div>
      </div>
    </div>
    <!-- 添加具体规格弹窗 -->
  </view>
</PublicPage>
</template>
<script>
import PublicPage from "@/components/publicPage/index.vue";
import goodsApi from "@/api/goods.js"
export default {
  components: {PublicPage},
  data () {
    return {
      classifyTypeShow: false,
      specName: '',
      addSpecData: {
        specName: '',
        goodsSpecValuesVOList: []
      },
      operationType: 0,
      opSpecificType: 0,
      specificSpecShow: false,
      specificSpecName: '',
      specificSpecData: {},
      spuQuantity: 30, // 现在具体规格最多添加多少个
    }
  },
  methods: {
    inputFn (e, name) {
      let inputValue = e.target.value.replace('^^','')
      this.$nextTick(() => {
        this[name] = inputValue
      })
    },
    specSubmitFn () {
      if (!this.addSpecData.specName) {
        return wx.showToast({
          icon: 'none',
          mask: true,
          title: '请输入规格类型名称!'
        })
      }
      if (!this.addSpecData.goodsSpecValuesVOList.length||this.addSpecData.goodsSpecValuesVOList.length<1) {
        return wx.showToast({
          icon: 'none',
          mask: true,
          title: `请输入${this.addSpecData.specName}的具体规格值!`
        })
      }
      let data = {
        goodsAddSpecVO: {
          specName: this.addSpecData.specName,
          goodsAddSpecValueVOList: this.addSpecData.goodsSpecValuesVOList
        }
      }
      goodsApi.goodsSpec(data).then(async (res_) => {
        if (res_.code == 200) {
          this.querySpecFn()
        }
      })
    },
    querySpecFn () {
      goodsApi.querySpec().then(async (res_) => {
        if (res_.code == 200) {
          let categoryArr = res_.data
          this.$store.commit('SYSTEM_SPEC_LIST', categoryArr)
          this.navigateBack({
            delta: 1
          })
        }
      })
    },
    submitSpecsFn () {
      if (!this.specName) {
        return wx.showToast({
          icon: 'none',
          mask: true,
          title: '请输入规格类型名称!'
        })
      }
      let arr = this.$store.state.systemspecList
      let mun = 0
      arr.forEach((item)=>{
        if (item.specName == this.specName) {
          mun = mun+1
        }
      })
      if (mun>0) {
        let this_ = this
        return wx.showToast({
          icon: 'none',
          mask: true,
          title: `已存在【${this_.specName}】规格类型!`
        })
      }
      this.addSpecData = {
        ...this.addSpecData,
        specName: this.specName
      }
      this.specName = ''
      this.classifyTypeShow = false
    },
    addSpecsFn () {
      if (this.addSpecData.specName) {
        this.specName = this.addSpecData.specName
        this.operationType = 1
      } else {
        this.specName = ''
        this.operationType = 0
      }
      this.classifyTypeShow = true
    },
    removeSpecificSpecFn(index) {
      let this_ = this
      wx.showModal({
        title: '提示',
        content: '确定删除该具体规格吗？',
        success (res) {
          if (res.confirm) {
            this_.addSpecData.goodsSpecValuesVOList.splice(index, 1)
          } else if (res.cancel) {
          }
        }
      })
    },
    addSpecificSpecFn () {
      this.specificSpecName = ''
      this.opSpecificType = 0
      this.specificSpecShow = true
    },
    editSpecificSpecFn (data,index) {
      this.specificSpecData = {
        ...data,
        index: index
      }
      this.specificSpecName = ''
      this.specificSpecName = this.specificSpecData.specValue
      this.opSpecificType = 1
      this.specificSpecShow = true
    },
    submitSpecificSpecFn () {
      let this_ = this
      if (!this_.specificSpecName) {
        return wx.showToast({
          icon: 'none',
          mask: true,
          title: '请输入具体规格名称!'
        })
      }
      let mun = 0
      if (this_.addSpecData.goodsSpecValuesVOList&&this_.addSpecData.goodsSpecValuesVOList.length>0) {
        if (this_.addSpecData.goodsSpecValuesVOList.length>=this_.spuQuantity) {
          return wx.showToast({
            icon: 'none',
            mask: true,
            title: '具体规格最多可添加20个!'
          })
        }
        this_.addSpecData.goodsSpecValuesVOList.forEach(item => {
          if (item.specValue == this_.specificSpecName) {
            mun = mun+1
          }
        })
      }
      if (mun>0) {
        return wx.showToast({
          icon: 'none',
          mask: true,
          title: `已存在【${this_.specificSpecName}】规格!`
        })
      }
      if (this_.opSpecificType == 0) {
        if (!this_.addSpecData.goodsSpecValuesVOList||this_.addSpecData.goodsSpecValuesVOList.length<1) {
          this_.addSpecData.goodsSpecValuesVOList = []
        }
        this_.addSpecData.goodsSpecValuesVOList.push({specValue: this_.specificSpecName})
      }
      if (this_.opSpecificType == 1) {
        this_.addSpecData.goodsSpecValuesVOList[this.specificSpecData.index] = {
          ...this_.addSpecData.goodsSpecValuesVOList[this.specificSpecData.index],
          specValue: this_.specificSpecName
        }
      }
      this.specificSpecShow = false
    }
  }
}
</script>
<style lang="scss" scoped>
.layout_box {
  width: 100vw;
  height: 100%;
  background-color: #F2F3F5;
  .layout_con_box {
    width: 100%;
    height: calc(100% - 98rpx) !important;
  }
  .specs_msg_box {
    background-color: #fff;
    padding: 24rpx 30rpx;
    border-bottom: 2rpx solid #eee;
    display: flex;
    align-items: center;
    .edit_icon_box {
      width: 36rpx;
      height: 36rpx;
      margin-left: 18rpx;
    }
  }
  .specs_list_ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 30rpx 32rpx 0 32rpx;
    font-size: 28rpx;
    font-weight: bolder;
    background-color: #fff;
    .specs_list_li {
      padding: 10rpx 16rpx;
      color: #E44435;
      background-color: #FFE5DE;
      border-radius: 8rpx;
      line-height: 40rpx;
      margin-right: 32rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 30rpx;
      position: relative;
      &:last-child {
        margin-right: 0rpx;
      }
      &.specs_list_li_two {
        border: 2rpx solid #dcdee0;
        font-weight: 400;
        color: rgba(0,0,0,0.90);
        background-color: #FFF;
      }
      .close_icon_box {
        width: 32rpx;
        height: 32rpx;
        position: absolute;
        top: 4rpx;
        right: 4rpx;
      }
    }
  }
  .keep_btn_box {
    width: 100%;
    background-color: #fff;
    .btn_box {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 96rpx;
      font-size: 32rpx;
      background-color: #e44435;
      border-radius: 0rpx;
      color: #fff;
      font-weight: 400;
    }
  }
}
</style>